<template>
  <maskLayer v-model="visible" center append-to-body>
    <div class="agreement_content">
      <div class="agreement_title">
        <span v-if="score == 1">用户注册协议</span>
        <span v-if="score == 2">隐私政策</span>
        <span v-if="score == 3">付款协议</span>
        <span v-if="score == 4">提现规则</span>
        <span v-if="score == 5">签到规则</span>
        <span v-if="score == 7">积分规则</span>
        <img @click="closeLayer" src="../assets/login/9.png" alt="" />
      </div>
      <div class="agreement_view" v-loading="loading">
        <el-scrollbar>
          <div v-if="visible" v-html="agreementContent"></div>
        </el-scrollbar>
      </div>
    </div>
  </maskLayer>
</template>

<script setup name="viewAgreement">
import maskLayer from "@/components/maskLayer.vue";
import { post641568f1b6f87 } from "@/utils/api.js";
import { ref, toRefs, watch } from "vue";

const props = defineProps({
  score: {
    type: Number,
    default: 1,
  },
});
const { score } = toRefs(props);
watch(score, (val) => {
  props.score = val;
  getAgreement();
},{immediate:true})

let loading = ref(false);
let visible = ref(false);
let agreementContent = ref("");
function openPopup() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 300);
  visible.value = true;
}
// 获取协议内容
function getAgreement() {
  post641568f1b6f87({ column_id: props.score }).then((res) => {
    // console.log(res);
    if (res.code == 1) {
      agreementContent.value = res.data.content;
    }
  });
}
function closeLayer() {
  visible.value = false;
}

defineExpose({
  openPopup,
});
</script>

<style lang="scss" scoped>
.agreement_content {
  width: 540px;
  height: 380px;
  background: #fff;
  .agreement_title {
    width: 100%;
    height: 28px;
    background: #1f52ae;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    img {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }
  .agreement_view {
    height: 352px;
    padding: 16px;
    font-size: 8px;
    color: #666;
  }
}
</style>